<template>
	<view class="goods_item" @click="handNavTo()">
		<u-radio :name="item.id" v-if="isRadio">
		</u-radio>
		<u-image style="min-width: 274rpx;min-height: 274rpx;" width="274rpx" height="274rpx" :src="item.imgUrl"
			mode='aspectFill'>
		</u-image>
		<view class="goods_msg u-border-bottom">
			<view class="title">
				{{item.title}}
			</view>
			<view class="">
				<!-- v-if="item.isAutarky==1" -->

				<view class="goods_bot">
					<u-icon color='#BDBDBD' name="map"></u-icon>
					<view class="site">
						距离{{distance}}km
					</view>
				</view>
				<u-tag v-if="item.isAutarky==1" text="自营店" mode='dark' bg-color="#FFA147" size='mini' class="" />
				<view class="pic_box">
					<view class="pic_num">
						￥{{item.price}}
					</view>
					<view class="number_people">
						{{item.salesVolume}}人购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMapDistance
	} from '@/utils/utils.js'
	export default {
		name: "ZY-Goods-item",
		props: {
			isRadio: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			distance() {
				const longitude = this.cache.getCache('longitude')
				const latitude = this.cache.getCache('latitude')
				if (longitude && latitude) {
					return (getMapDistance(latitude, longitude, this.item.lat, this.item.lng)).toFixed(2)
				}
			}
		},
		data() {
			return {
				value: ''
			};
		},
		methods: {
			handNavTo() {
				// if (this.isNavTo) return
				this.$emit('handNavTo')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods_item {
		display: flex;
		margin-bottom: 20rpx;

		.goods_msg {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 23rpx;
			width: 100%;
			padding-right: 20rpx;
			padding-bottom: 10rpx;

			.pic_box {
				display: flex;
				align-items: flex-end;

				.number_people {
					font-size: 24rpx;
					color: #BDBDBD;
				}

				.pic_num {
					color: $u-type-primary;
					font-size: 34rpx;
					margin-right: 10rpx;
				}
			}

			.goods_bot {
				display: flex;
				align-items: center;
				margin-bottom: 26rpx;

				.type_title {
					font-size: 24rpx;
					color: $u-type-primary;
					margin-right: 23rpx;
				}

				.site {
					font-size: 24rpx;
					color: #BDBDBD;
				}
			}

			.title {
				@include ellipsisMultiline(2);
				font-size: 30rpx;
				color: #101010;
			}
		}
	}
</style>
